<template>
    <div>

        <div class="main">
            <div class="login">
                <div class="title">
                    <img src="../assets/images/logo.f17d1107.png" class="logo">
                    <h1>黛西餐厅管理平台</h1>
                </div>
                <img src="@/assets/images/bg.1bab4b11.png" class="login-bg">
                <el-form :model="form">
                    <el-form-item><span style="font-size: 20px;">用户登录</span></el-form-item>
                    <el-form-item>
                        <el-input v-model="form.user_name" placeholder="用户名"></el-input><img src="user.svg" alt="user">
                    </el-form-item>
                    <el-form-item>
                        <el-input v-model="form.user_password" placeholder="密码" type="password"></el-input><img
                            src="pwd.svg" class="pwd">
                    </el-form-item>
                    <el-form-item style="display:flex;justify-content: end; margin-right: 5px;">
                        <el-checkbox v-model="checked">记住密码</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" @click="login">
                            立即登录
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import httpApi from '@/service'
export default {
    data() {
        return {
            form: {
                user_name:localStorage.getItem('user_name') ,
                user_password:localStorage.getItem('user_password'),

            },
            checked: Boolean(localStorage.getItem('checked'))
        }
    },
    methods: {
        login() {

            NProgress.start()
            let params = {
                user_name: this.form.user_name,
                user_password: this.form.user_password
            }

            httpApi.userApi.userLogin(params).then(res => {
                if (res.data.code == 200) {
                    localStorage.setItem('token', res.data.token)
                    if (this.checked) {
                        localStorage.setItem('user_name',this.form.user_name)
                        localStorage.setItem('user_password',this.form.user_password)
                        localStorage.setItem('checked',this.checked)
                    }else{
                        localStorage.removeItem('user_name')
                        localStorage.removeItem('user_password')
                        localStorage.removeItem('checked')
                        
                    }
                    this.$router.push('/index')
                    this.$message.success('登录成功,欢迎您', 1000);
                    NProgress.done()
                } else {
                    this.$message.error(res.data.msg, 3000);
                    NProgress.done()
                }
            })

        }
    },
}
</script>

<style lang="scss" scoped>
.main {
    min-width: 900px;
    height: 100vh;
    background-image: url('@/assets/images/1.dda723d1.png');
    background-position: center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    .login {
        position: relative;
        width: 1000px;
        height: 500px;
        background-color: #fff;

        .title {
            position: absolute;
            left: 5px;
            top: -130px;
            display: flex;
            align-items: center;

            .logo {
                width: 125px;
            }

            h1 {
                margin-left: 20px;
                font-weight: normal;
                font-size: 30px;
                color: #fff;
            }
        }

        .login-bg {
            width: 100%;
            height: 100%;
        }

        .el-form {
            width: 30%;
            position: absolute;
            right: 8%;
            top: 15%;

            .el-form-item {
                img {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 3%;
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }

    // login结尾
    ::v-deep .el-input__inner {
        padding: 0 35px;
    }
}
</style>